<template>
  <Draggable
    :list="componentDraggableList"
    @input="updateComponentDraggableList"
    class="component-draggable"
    :class="{inline: isInline}"
    v-bind="draggableOptions"
    @change="draggableListChange"
    animation="300"
    @start="startDraggable"
    @end="endDraggable"
  >
    <transition-group
      tag="div"
      class="form-list"
      type="transition"
      name="flip-list"
      :class="{ 'min-height': componentDraggableList.length < 1,inline: isInline }"
    >
      <slot>
        <div class="drag-placeholder" key="placeholder">
          拖拽组件到这里
        </div>
      </slot>
    </transition-group>
  </Draggable>
</template>

<script>
import Draggable from 'vuedraggable'

export default {
  name: 'VIDraggable',
  components: {
    Draggable,
  },
  props: {
    // 组件拖拽列表
    componentDraggableList: {
      type: Array,
      default: () => [],
    },
    // 拖拽区域提示
    draggableTip: {
      type: String,
      default: '拖拽组件到这里',
    },
    // 拖拽配置选项
    draggableOptions: {
      type: Object,
      default: () => ({
        group: 'canvas',
        animation: 100,
        handle: '.vi-drag-container',
        emptyInsertThreshold: 0,
        ghostClass: 'ghost-css',
        chosenClass: 'chosen-css',
        fallbackOnBody: true,
      }),
    },
    // 拖拽区域显示为行元素
    isInline: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {};
  },
  computed: {},
  methods: {
    // 拖拽列表数据变化
    draggableListChange(changeObj) {
      // 添加组件的情况
      // if (changeObj && changeObj.added && changeObj.added.element) {
      //   componentService.setSelectComponentKey(changeObj.added.element.key);
      // }
      // // 移动组件的情况
      // if (changeObj && changeObj.moved && changeObj.moved.element) {
      //   componentService.setSelectComponentKey(changeObj.moved.element.key);
      // }
    },
    // 更新拖拽列表
    updateComponentDraggableList(componentDraggableList) {
      // this.$emit('updateList', componentDraggableList);
    },
    // 开始拖拽
    startDraggable() {
      // this.componentDraggableState = 'start';
    },
    // 开始拖拽
    endDraggable() {
      // this.componentDraggableState = 'end';
    },
  },
  created() {},
  mounted() {},
};
</script>

<style scoped lang="less">
.inline {
  display: inline-block;
}
.component-draggable {
  deep(.ghost-css) {
    position: relative;
    display: block !important;
    overflow: hidden !important;
    width: 100% !important;
    height: 2px !important;
    padding: 0 !important;
    background-color: rgb(15,112,253) !important;
    border: none !important;
    margin: 0 !important;
    &::before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      height: 2px;
      width: 100%;
      z-index: 11;
      background-color: rgb(15,112,253);
    }
  }
  &.height-full {
    height: 100%;
  }
  deep(.ghost-css + .drag-placeholder) {
    display: none;
  }
}
.border-top,
.border-left,
.border-right,
.border-bottom {
  position: absolute;
  border: 0.5px dashed #e1e1e1;
  overflow: hidden;
  z-index: 10;
}
.border-top {
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
}
.border-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
}
.border-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}
.border-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 1px;
}

.form-list {
  height: 100%;
}
.min-height {
  min-height: 50px;
  min-width: 100px;
}
.drag-placeholder {
  height: 100%;
  width: 100%;
  background-color: #f0f0f0;
  border: 1px dotted;
  color: #a7b1bd;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
</style>
